<script setup>
import axios from "axios";
import * as echarts from "echarts";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { useLeftStore } from "@/stores/left.js";
import Chart from "@/components/Chart/index.vue";

const leftStore = useLeftStore();
const { scyy_rq, spec, tableData } = storeToRefs(leftStore);

onMounted(async () => {
    // pie1();
});
</script>

<template>
    <div class="contain">
        <!-- 生产运营 -->
        <div style="padding-bottom: 20px">
            <div class="title">生产运营</div>
            <div class="title2">燃气</div>
            <div class="box" style="line-height: 36px">
                <el-row>
                    <el-col
                        v-for="{ name, value } in scyy_rq[0]"
                        :key="name"
                        :span="8"
                    >
                        <div class="text" style="width: 100%; margin: 20px 0">
                            <div>{{ name }}</div>
                            <div>
                                <span class="iFont">{{ value }}</span
                                >座
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <!-- <br /> -->
                <el-row>
                    <el-col
                        v-for="{ name, value, unit } in scyy_rq[1]"
                        :key="name"
                        :span="12"
                    >
                        <div class="text" style="width: 100%; margin: 20px 0">
                            <div>
                                {{ name }}
                                <span class="iFont">{{ value }}</span
                                >{{ unit }}
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 管网管理 -->
        <div>
            <div class="title">管网管理</div>
            <div class="text" style="line-height: 40px; margin: 20px 0">
                燃气管网里程<span style="color: aqua; font-weight: bold"
                    >1234234</span
                >万Nm³
            </div>
            <Chart
                :width="'600px'"
                :height="'300px'"
                :option="spec"
                id="pieRef1"
            />
        </div>
        <!-- 工程建设 -->
        <div style="padding-bottom: 20px">
            <div class="title" style="margin-bottom: 30px">数据缺陷</div>
            <el-row class="tableHeaderBg">
                <el-col :span="6">
                    <div class="tableHeard">问题</div>
                </el-col>
                <el-col :span="6">
                    <div class="tableHeard">时间</div>
                </el-col>
                <el-col :span="6">
                    <div class="tableHeard">数据</div>
                </el-col>
                <el-col :span="6">
                    <div class="tableHeard">明细</div>
                </el-col>
            </el-row>
            <Vue3SeamlessScroll
                :list="tableData"
                :hover="true"
                :step="1"
                class="table"
            >
                <el-row
                    class="tableText"
                    v-for="(item, index) in tableData"
                    :key="`table-${{ index }}`"
                >
                    <el-col class="ove" :span="6">
                        <el-tooltip
                            effect="dark"
                            :content="item.question"
                            placement="top"
                            >{{ item.question }}</el-tooltip
                        >
                    </el-col>
                    <el-col class="ove" :span="6">
                        <el-tooltip
                            effect="dark"
                            :content="item.time"
                            placement="top"
                            >{{ item.time }}</el-tooltip
                        ></el-col
                    >
                    <el-col class="ove" :span="6">
                        <el-tooltip
                            effect="dark"
                            :content="item.data"
                            placement="top"
                            >{{ item.data }}</el-tooltip
                        >
                    </el-col>
                    <el-col class="ove" :span="6">
                        <el-tooltip
                            effect="dark"
                            :content="item.info"
                            placement="top"
                            >{{ item.info }}</el-tooltip
                        ></el-col
                    >
                </el-row>
            </Vue3SeamlessScroll>
        </div>
    </div>
</template>
<style scoped>
.contain {
    width: 600px;
    min-height: 93%;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 8%;
    left: 20px;
    z-index: 9;
}
.title {
    width: 80%;
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    margin: 10px;
    background-image: url("@/assets/img/image1.png");
    background-size: 100% 100%;
    text-align: center;
    line-height: 50px;
    font-style: oblique;
}
.title2 {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    padding-left: 10px;
    margin: 10px;
    background-image: url("@/assets/img/image2.png");
    background-size: 100% 100%;
    width: 140px;
    text-align: center;
    margin: 20px auto;
}
.icon {
    width: 30px;
    height: 30px;
    background-color: aqua;
}
.text {
    font-size: 20px;
    color: #fff;
    text-align: center;
}
.iFont {
    color: #47ffff;
    font-weight: bold;
    font-size: 22px;
}
.box {
    background-image: url("@/assets/img/image6.png");
    background-size: 100% 100%;
}
.boderColor {
    /* background-color: rgba(140, 251, 253, 0.2); */
    border-radius: 10px;
    padding: 5px 0;
    background: #24c6dc; /* fallback for old browsers */
    background: -webkit-linear-gradient(
        to right,
        #514a9d,
        #24c6dc
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
        to right,
        #514a9d,
        #24c6dc
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.table {
    height: 350px;
    width: 100%;
    overflow: hidden;
}
.tableHeard {
    font-size: 20px;
    color: #47ffff;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
}
.tableHeaderBg {
    background: #000046; /* fallback for old browsers */
    background: -webkit-linear-gradient(
        to right,
        #1cb5e0,
        #000046
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
        to right,
        #1cb5e0,
        #000046
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.tableText {
    color: rgba(255, 255, 255, 0.8);
    /* color: #4286f4; */
    font-size: 20px;
    text-align: center;
    /* background-color: rgba(64, 73, 98, 0.2); */
}
.ove {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
</style>
